<script setup>
import RankItem from './RankItem.vue'
</script>

<template>
  <div class="box_card">
    <span>热门文章</span>
    <div class="bottom">
      <RankItem
        v-for="(item, index) in 3"
        :key="index"
        @click="$router.push({ name: 'BlogDetail', params: { id: index } })"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.box_card {
  width: 100%;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: white;

  span {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: normal;
    color: #000000;
  }
  .bottom {
    width: 100%;
  }
}
</style>
